<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:pservers-grad-05-b </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-pservers-grad-05-b.html">Full version</a>, <a href="basic-pservers-grad-05-b.html">Basic version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/pservers.html#Gradients">13.2 Gradients</a></p>
 <p>
				<a href="full-pservers-grad-04-b.html">pservers-grad-04-b ←</a> 
				<a href="full-index.html">index</a>
				<a href="full-pservers-grad-06-b.html">→ pservers-grad-06-b</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>pservers-grad-05-b</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=480 height=360>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/pservers-grad-05-b.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=480 height=360 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/pservers-grad-05-b.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of pservers-grad-05-b" src="../png/full-pservers-grad-05-b.png" width="480" height="360"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
			<p>
				Test that checks the capability of the stop opacity in linear and radial 
				gradients.
			</p>
			<p>
				There are two tests which contains rectangles with gradients using stop-opacity properties.
				A cyan color text string "Background" is put behind both of the rectangles to help
				demonstrate the opacity concept.
				From top-down the appearance of objects is as follows.
			</p>
			<p>
				The first rectangle has a linear gradient fill with a vector starting at top left 
				and going to bottom right. The stop colors are at 20% spacing apart and are in the
				following order : violet, blue, lime, yellow, orange, red.
				Also a stop opacity is given to the colors in the following order: 1, 0.2, 0.5, 0, 0.8, 1
				Because the gradient vector vector goes from (0,0) to (1,1) in object bounding box space
				and because the object bounding box has a larger width than height, the gradient vector
				is skewed off of a pure 45 degree angle. The gradient stripes are also skewed
				so that they are no longer perpendicular to the gradient vector.
			</p>
			<p>
				The next rectangle has a radial gradient fill with a multi-color stops from innermost
				to outermost in the following order : black, yellow, red, blue, white, green.
				Also a stop opacity is given to the colors in the following order: 1, 0.2, 0.5, 0, 0.8, 1
			</p>
			<p>
				The rendered picture should match the reference image exactly, except for possible
				variations in the labelling text (per CSS2 rules).  
			</p>

		</div>
<div class="linkbar"> <p>
				<a href="full-pservers-grad-04-b.html">pservers-grad-04-b ←</a>
				<a href="full-index.html">index</a>
				<a href="full-pservers-grad-06-b.html">→ pservers-grad-06-b</a>
						</p></div>
</body>
</html>
